*{
    margin: 0;
    padding: 0;
}

.bg{
    background: rgb(29, 33, 36);
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    

    .front{
        font-size: 4vh;
        color: aliceblue;
        padding-top: 2vh;
        padding-bottom: 2vh;
        // margin-top: 2vh;
    }
    .main{
        background: rgb(255, 255, 255);
        height: 85%;
        width: 90%;
        border-radius: 1vh;
        .content{
            // background: pink;
            display: flex;
            flex-direction: column;
           
            .control{
                margin-top: 8vh;
                margin-left: 5vw;
                height: 40vh;
                width: 90%;
                // background-color: black;
                display: flex;

                .fourRoad{
                    flex-grow: 2;
                    margin-right: 1vw;
                    // background-color: rgb(91, 102, 102);
                    position: relative;
                    border: solid black 0.5vh;
                    border-radius: 0.3vw;
                    span{
                        position: absolute;
                        width: 25vw;
                        top: -2vh;
                        background-color: rgb(255, 255, 255);
                        right: 30%;
                        font-size: 1.5vw;
                        font-weight: 600;


                   
                    } 
                    .kaiguan{
                        width: 100%;
                        top: 10vh;
                        position: absolute;
                        height: 10vh;
                        // background-color: green;
                        display: flex;
                        justify-content:space-evenly;
                       
                        .el-switch{
                            font-weight: 800;
                        }
                    }

                }
                .setPoint{
                    flex-grow: 1;
                    // background-color: azure;
                    position: relative;
                    // background-color: aqua;
                    border: solid black 0.5vh;
                    border-radius: 0.3vw;
                  
                    span{
                        position: absolute;
                        width: 10vw;
                        background: #ffffff;
                        top: -2.3vh;
                        right: 40%;
                        font-size: 1.5vw;
                        font-weight: 600;
                        // right: 2vh;
                        // margin-right: 6vw
                    }
                    .el-switch{
                        margin-top: 10vh;
                    }
                }
            }
            .tips{
                width: 90%;
                margin-left: 5vw;
                // background-color: aqua;
                padding-top: 5vh;
                text-align:left;
                font-size: 2vh;
                font-weight: 700;
                //  start;
            }
        }
        .exit{
            margin-left: 5vw    ;
            height: 25vh;
            width: 90%;
            // right: 3vh;
            // bottom: 2vh;
            // background-color: red;
            // display: flex;
            position: relative;
            // justify-content: end;
            // align-items: flex-end;


            button{
                height: 5vh;
                width: 7vw;
                font-size: 1vw;
                font-weight: 800;
                position: absolute;
                right: 0;
                bottom: 0;
                background-color: #4782ba;
                color: aliceblue;
                border-radius: 0.5vh;
                border: 0ch;
                cursor: pointer;
            }
        }

    }
}
:deep .el-switch__label * {
    line-height: 1;
    font-size: 1.2vw;
    display: inline-block;
    font-weight: 600;
}